<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="backstage/common/head::head"></head>
<style>
    #content-container:before {
        background: none;
    }

    .lay-win {
        display: none;
    }

</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
    <div id="container" class="effect aside-float aside-bright mainnav-lg">

        <!--NAVBAR-->
        <!--===================================================-->
        <header id="navbar" th:replace="backstage/common/header::header"></header>
        <!--===================================================-->
        <!--END NAVBAR-->

        <div class="boxed">
            <div id="content-container">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <div id="page-content">
                    <button id="demo-btn-addrow" class="btn btn-purple" onclick="addArticle()"><i
                            class="demo-pli-add"></i> 增加</button>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="width:50px;"> 序号 </th>
                            <th> 链接地址 </th>
                            <th> 名称 </th>
                            <th style="width:250px;"> 操作 </th>
                        </tr>
                        </thead>
                        <tbody id="user_table_body"></tbody>
                    </table>
                    <div id="page" style="align-content: center;text-align: center"></div>
                </div>
            </div>
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->

            <!--MAIN NAVIGATION-->
            <!--===================================================-->
            <nav id="mainnav-container" th:replace="backstage/common/left::left(8)"></nav>
            <!--===================================================-->
            <!--END MAIN NAVIGATION-->

        </div>
        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer" th:replace="backstage/common/foot::footer"></footer>
        <!--===================================================-->
        <!-- END FOOTER -->
        <!-- SCROLL PAGE BUTTON -->
        <!--===================================================-->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
        <!--===================================================-->
    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->
    <div class="lay-win">
        <form class="form-horizontal" action="/backstage/user/userAdd">
            <input type="hidden" id="input_id" name="id"/>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="url">链接地址</label>
                    <div class="col-sm-6">
                        <input type="text" name="url" placeholder="链接地址" class="form-control input-sm" id="url">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">名称</label>
                    <div class="col-sm-6">
                        <input type="text" name="name" id="name" placeholder="请输入姓名" class="form-control input-sm" >
                    </div>
                </div>
            </div>
        </form>
    </div>

</body>
<script th:inline="javascript">
    function page(totalCount,currPage) {
        layui.use(['laypage'], function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalCount //数据总数，从服务端得到
                , curr: currPage
                , limit: 10
                , jump: function (obj, first) {
                    //首次不执行
                    if (!first) {
                        var page = parseInt(obj.curr)-1;
                        $.ajax({
                            url: '/backstage/friendLink/friendLinkPage',
                            type: 'get',
                            data:{"pageIndex":page,"pageSize":10},
                            success: function (res) {
                                var data ="";
                                if(res!=null){
                                    $.each(res.list,function(i,n) {
                                        data += `<tr>
                                            <td>${n.id}</td>
                                            <td>${n.url}</td>
                                            <td>${n.name}</td>
                                            <td>
                                                    <button id="demo-btn-addrow" class="btn btn-info" onclick="update(${n.id})"> 修改</button>
                                                    <button id="demo-btn-addrow" class="btn btn-danger" onclick="delfriendLink(${n.id})"> 删除</button>
                                            </td>
                                        </tr>`;
                                    });
                                    $("#user_table_body").html(data)
                                }
                            }
                        });
                    }
                }
            });
        });
    }
</script>

<script>

    $(function () {
        friendLinkPage(0,20);
    });
    function addArticle() {
        // itemList();
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn:['保存','取消'],
                yes:function () {
                   save(1,null);
                }
            })
        })
    }
    //修改用户
    function update(id) {
        findById(id);
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn:['保存','取消'],
                yes:function () {
                    save(0,id);
                }
            })
        })

    }

    function friendLinkPage(pageIndex,pageSize){
        $.ajax({
            url: '/backstage/friendLink/friendLinkPage',
            type: 'get',
            data:{"pageIndex":pageIndex,"pageSize":pageSize},
            success: function (res) {
                var data ="";
                if(res!=null){
                    $.each(res.list,function(i,n) {
                        data += `<tr>
                            <td>${n.id}</td>
                            <td>${n.url}</td>
                            <td>${n.name}</td>
                            <td>
                                    <button id="demo-btn-addrow" class="btn btn-info" onclick="update(${n.id})"> 修改</button>
                                    <button id="demo-btn-addrow" class="btn btn-danger" onclick="delfriendLink(${n.id})"> 删除</button>
                            </td>
                        </tr>`;
                    });

                    $("#user_table_body").html(data)
                    page(res.totalSize,res.pageIndex);
                }
            }
        });
    }

    /**
     * 保存用户
     * @param t 1新增 0修改
     * @returns {boolean}
     */
    function save (t,id) {
        var url='/backstage/friendLink/addFriendLink';
        if(t==0) {
            url = '/backstage/friendLink/updateFriendLink';
        }
        var d = {};
        var vals = $(".form-horizontal").serializeArray();
        $.each(vals, function () {
            d[this.name] = this.value;
        });
        d.id=id;
        var data=JSON.stringify(d);
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            contentType: 'application/json',
            success: function (res) {
                location.href="/backstage/friendLink";
            }
        });
        return false;
    }
    function delfriendLink( id) {
        $.ajax({
            url: '/backstage/friendLink/delFriendLink',
            type: 'post',
            data: {"id":id},
            // contentType: 'application/json',
            success: function (res) {
                location.href="/backstage/friendLink";
            }
        });
    }
    function findById(id) {
        $.ajax({
            url: '/backstage/friendLink/friendLinkById',
            type: 'post',
            data: {"id":id},
            // contentType: 'application/json',
            success: function (res) {
                console.log("findById",res)
                $("#url").val(res.data.url);
                $("#name").val(res.data.name);

            }
        });
    }

</script>

</html>